<template>
  <view class="tabbar">
    <view class="tab-item" @click="switchTab(0)">
      <image src="https://jyoungy.oss-cn-beijing.aliyuncs.com/jyy-mini-sale/tabbar/gift.svg" class="tab-icon"  :class="{'svg_icon-inner': activeIndex === 0 }" />
      <text :class="{active: activeIndex === 0}">商城</text>
    </view>
    <view class="tab-item" @click="switchTab(1)">
      <image src="https://jyoungy.oss-cn-beijing.aliyuncs.com/jyy-mini-sale/tabbar/xwj.svg" class="tab-icon"  :class="{'svg_icon-inner': activeIndex === 1 }" />
      <text :class="{active: activeIndex === 1}">BSA介绍</text>
    </view>
    <view class="tab-item center" @click="switchTab(2)">
      <view class="center-shadow"></view>
      <image class="center-icon" :src="activeIndex === 2 ? centerIconActive : centerIcon" mode="widthFix" />
    </view>
    <view class="tab-item" @click="switchTab(3)">
      <image  src="https://jyoungy.oss-cn-beijing.aliyuncs.com/jyy-mini-sale/tabbar/cart.svg" class="tab-icon"  :class="{'svg_icon-inner': activeIndex === 3 }" />
      <text :class="{active: activeIndex === 3}">购物车</text>
      <view class="cart-badge">{{ cartCount }}</view>
    </view>
    <view class="tab-item" @click="switchTab(4)">
      <image src="https://jyoungy.oss-cn-beijing.aliyuncs.com/jyy-mini-sale/tabbar/user.svg" class="tab-icon"  :class="{'svg_icon-inner': activeIndex === 4 }" />
      <text :class="{active: activeIndex === 4}">我的</text>
    </view>
  </view>
</template>

<script>
import cartManager from '@/utils/cart'
export default {
  name: 'CustomTabBar',
  props: {
    activeIndex: {
      type: Number,
      default: 2
    }
  },
  data() {
    return {
      cartCount: 0,
      iconMall: 'https://jyoungy.oss-cn-beijing.aliyuncs.com/jyy-mini-sale/tabbar/mall.png',
      iconMallActive: 'https://jyoungy.oss-cn-beijing.aliyuncs.com/jyy-mini-sale/tabbar/mall_active.png',
      iconBsa: 'https://jyoungy.oss-cn-beijing.aliyuncs.com/jyy-mini-sale/tabbar/bsa.png',
      iconBsaActive: 'https://jyoungy.oss-cn-beijing.aliyuncs.com/jyy-mini-sale/tabbar/bsa_active.png',
      iconCart: 'https://jyoungy.oss-cn-beijing.aliyuncs.com/jyy-mini-sale/tabbar/cart.png',
      iconCartActive: 'https://jyoungy.oss-cn-beijing.aliyuncs.com/jyy-mini-sale/tabbar/cart_active.png',
      iconUser: 'https://jyoungy.oss-cn-beijing.aliyuncs.com/jyy-mini-sale/tabbar/user.png',
      iconUserActive: 'https://jyoungy.oss-cn-beijing.aliyuncs.com/jyy-mini-sale/tabbar/user_active.png',
      centerIcon: 'https://jyoungy.oss-cn-beijing.aliyuncs.com/jyy-mini-sale/tabbar/logo.png',
      centerIconActive: 'https://jyoungy.oss-cn-beijing.aliyuncs.com/jyy-mini-sale/tabbar/logo-active.png'
    }
  },
  mounted() {
    cartManager.addListener(this.getCartCount)
    this.getCartCount()
  },
  methods: {
    getCartCount() {
      this.cartCount = cartManager.getTotalQuantity()
    },
    switchTab(index) {
      // 跳转页面逻辑
      if(index === 0) {
        uni.switchTab({ url: '/pages/mall/index' })
      } else if(index === 1) {
        uni.switchTab({ url: '/pages/bsa/index' })
      } else if(index === 2) {
        // 中间按钮可自定义
        uni.switchTab({ url: '/pages/index/index' })
      } else if(index === 3) {
        uni.switchTab({ url: '/pages/cart/index' })
      } else if(index === 4) {
        uni.switchTab({ url: '/pages/user/index' })
      }
      this.$emit('change', index)
    }
  }
}
</script>

<style scoped>
.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 150rpx;
  background: #fff;
  z-index: 999;
}

.cart-badge {
  position: absolute;
  top: 0;
  right: 50%;
  background-color: #1F2937;
  border-radius: 30rpx;
  transform: translateX(50%) translateY(-90%);
  padding: 0 10rpx;
  height: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 20rpx;
  font-weight: bold;
}

.svg_icon-inner {
  filter: brightness(0) saturate(100%);
}
.tab-item {
  flex: 1;
  text-align: center;
  color: #b0b0b0;
  font-size: 22rpx;
  position: relative;
}
.tab-item .active {
  color: #000;
}
.tab-item.center {
  position: relative;
  top: -20rpx;
  z-index: 1;
}
.tab-icon {
  width: 30rpx;
  height: 30rpx;
  display: block;
  margin: 0 auto 10rpx auto;
}
.center-icon {
  width: 80rpx;
  display: block;
  margin: 0 auto;
  padding: 8rpx;
  background: #fff;
  border-radius: 80rpx;
  margin-bottom: 22rpx;
}
.tabbar-line {
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: 10rpx;
  height: 8rpx;
  background: #000;
  border-radius: 4rpx;
}
.center-shadow {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 80rpx;
  height: 40rpx;
  border-top-left-radius: 40rpx;
  border-top-right-radius: 40rpx;
  background: transparent;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
  z-index: -1;
  pointer-events: none;
}
</style> 